<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=0.8, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="./favicon.ico">
  <title>author:陈志航</title>
  <style>
    html body{
       width: 100%;
      height:100%;
      /* height:100%; */
      /* height: 2000px; */
      /* width:100%; */
      /* position:fixed; */
      background-color:rgb(236, 244, 248); 
    }
    body {
      padding: 0;
      margin: 0;
      margin-top: 30px;
      justify-content: center;
      align-items: center;
      width: 100%;
      /* height: 100vh; */
      box-sizing: border-box;
      background-color:rgb(236, 244, 248); 
      overflow-x: hidden;
    }
    .out-class{
      width: 400px;
      margin:0 auto;
      /* margin-bottom: 200px; */
     /* border: 1px solid red; */
     /* overflow: hidden; */
     
    }
    .top-icon-class{
      width: 400px;
      height: 200px;
      text-align: center;

    }
    .top-icon-class img{
      width: 100px;
      height: 100px;
    }
    .wrapper-pic0{
      height: 400px;
      width: 400px;
      background-image: url("./5.png");
      background-size: 100% 100%;
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
    }
    .bottom-style{
      margin-top: 200px;
      width: 400px;
      height: 400px;
      opacity: 0;
      transition: all 3s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
    }
    .bottom-style img{
      width: 400px;
      height: 300px;
      
    }
    .top-class{
      width: 400px;
      height: 400px;
    }
    .top-class img{
      width: 400px;
      height: 400px;
    }
    .icon-btn{
      position: absolute;
      bottom: -32px;
      left: 10px;
      cursor: pointer;
    }
    .icon-btn img{
      width: 100px;
      height: 100px;
    }
    .wrapper0 {
      height: 400px;
      width: 400px;
      position: relative;
      background-size: 100% 100%;
    }
    .wrapper {
      height: 800px;
      width: 400px;
      position: relative;
      background-image:none;
      background-size: 100% 100%;
    
    }
    .wrapper-pic{
      height: 800px;
      width: 400px;
      
      background-size: 100% 100%;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      left: 0;
      top: 0;
    }
    .wrapper-word-1{
      width: 100px;
      height: 597px;
      /* background-image: url("./1-1.png"); */
      background-size: 50% 50%;
      background-repeat: no-repeat;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      
      right: -40px;
      top: 104px;
    
    }
    .wrapper-word-2{
      width: 100px;
      height: 597px;
      /* background-image: url("./2-1.png"); */
      background-size: 50% 50%;
      background-repeat: no-repeat;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      right: -48px;
      top: 238px;
    }
    .wrapper-pic2{
      height: 800px;
      width: 400px;
      /* background-image: url("./2.png");  */
      background-size: 100% 100%;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      left: 0;
      top: 0;
    }
    .wrapper-word-3{
      width: 100px;
      height: 597px;
      /* background-image: url("./3-1.png"); */
      background-size: 100% 50%;
      background-repeat: no-repeat;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      right: 119px;
      top: 357px;
    }
    .wrapper-pic3{
      height: 800px;
      width: 400px;
      /* background-image: url("./3.png");  */
      background-size: 100% 100%;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      left: 0;
      top: 0;
    }
    .wrapper-pic4{
      height: 800px;
      width: 400px;
      /* background-image: url("./4.png");  */
      background-size: 100% 100%;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      left: 0;
      top: 0;
    }
    .wrapper-word-4{
      width: 100px;
      height: 597px;
      background-image: url("./4-1.png");
      background-size: 100% 50%;
      background-repeat: no-repeat;
      position: absolute;
      opacity: 0;
      transition: all 5s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      right: 27px;
      top: 305px;
    }
    .wrapper-word-5{
      width: 189px;
      height: 597px;
      background-image: url("./6.png");
      background-size: 100% 50%;
      background-repeat: no-repeat;
      position: absolute;
      opacity: 0;
      transition: all 3s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      right:  121px;
      top: 490px;
    }
    .wrapper-word-6{
      width: 450px;
      height: 233px;
      background-image: url("./7.png");
      background-size: 50% 80%;
      background-repeat: no-repeat;
      position: absolute;
      opacity: 0;
      transition: all 3s;
      transition-timing-function: ease-in;
      -webkit-transition-timing-function: ease-in;
      right: -162px;
      top: 57px;
    }
    .wrapper1 {
      height: 800px;
      width: 400px;
      position: relative;
      background-size: 100% 100%;
    }
    .wrapper2 {
      height: 800px;
      width: 400px;
      position: relative;
      background-size: 100% 100%;
    }
    .wrapper3 {
      height: 800px;
      width: 400px;
      position: relative;
      background-size: 100% 100%;
    }
    .wrapper4 {
      height: 800px;
      width: 400px;
      position: relative;
      margin-bottom: 200px;
      background-size: 100% 100%;
      /* border: 1px solid red; */
    }
    canvas {
      position: absolute;
    }

    #level {
      position: absolute;
      top: -1px;
      left: -1px;
      z-index: 4;
      width: 40px;
      text-align: center;
      font-size: 20px;
      outline: none;
      border: 1px solid #eee;
    }
  </style>
</head>

<body>
   
  <div class="out-class">
    
      <!-- <div class="top-class"><img src="./top.gif" alt=""></div> -->
      <div class="top-icon-class">
          <img src="./fan.png" alt="">
      </div>
      <div class="wrapper0">
          <div class="wrapper-pic0"><div class="icon-btn"><img src="./gif.gif"  alt=""></div></div>
          <canvas id="stage_0" width="400" height="400" style="z-index: 3;"></canvas>
        </div>
      <div class="wrapper">
        <div class="wrapper-pic"></div>
        <div class="wrapper-word-1"></div>
        <canvas id="stage_1" width="400" height="800" style="z-index: 3;"></canvas>
      </div>
      <div class="wrapper1">
          <div class="wrapper-pic2"></div>
          <div class="wrapper-word-2"></div>
        <canvas id="stage_2" width="400" height="800" style="z-index: 3;"></canvas>
      </div>
      <div class="wrapper2">
          <div class="wrapper-pic3"></div>
          <div class="wrapper-word-3"></div>
        <canvas id="stage_3" width="400" height="800" style="z-index: 3;"></canvas>
      </div>
      <div class="wrapper3">
          <div class="wrapper-pic4"></div>
          <div class="wrapper-word-4"></div>
        <canvas id="stage_4" width="400" height="800" style="z-index: 3;"></canvas>
      </div>
      <div class="wrapper4">
        <div class="wrapper-word-6"></div>
        <div class="wrapper-word-5"></div>
      <canvas id="stage_5" width="400" height="800" style="z-index: 3;"></canvas>
      
    </div>
    <!-- <div class="bottom-style">
        <img src="./bottom.png" alt="">
    </div> -->
    
  </div>
  
</body>
<script>
</script>
<script>

  window.onload = function () {
    const $ = document.querySelector.bind(document);
    let nowheight = 0
    const stage_0 = $('#stage_0').getContext('2d');
    const stage_1 = $('#stage_1').getContext('2d');
    const stage_2 = $('#stage_2').getContext('2d');
    const stage_3 = $('#stage_3').getContext('2d');
    const stage_4 = $('#stage_4').getContext('2d');
    const stage_5 = $('#stage_5').getContext('2d');
    let nowStep = stage_0
    const wrapper = $('.wrapper');
    const perStep = 0.007;
    const delay = 2;
    let level = 4;
    let isDrawing = false;
    let pathTimer = null;
    let points = [];
    function step2(arrayList){
      setTimeout(()=>{
        nowheight+=1
        points = [];
     
      arrayList.forEach(e=>{
        let x = e.x
        let y = e.y
        points.push({ x, y });
      })
      renderPath()
     
    },0)
    }
    // 点击提示触发
    let flag = true
    $('.icon-btn').addEventListener('click',function(){
      if(flag){
        flag = false
          let arrayList = [{x:65 ,y:340},{x:82 ,y:356},{x:100 ,y:380},{x:114 ,y:400},]
        arrayList.forEach(e=>{
          let x = e.x
          let y = e.y
          points.push({ x, y });
        })
        renderPath()
      }
      
    })
    // 当前画布记录点位置
    $('#stage_5').addEventListener('click', function ({ layerX: x, layerY: y }) {
      return
      // console.log(x,y) 
        if (isDrawing) {
          return;
        }
        points.push({ x, y });
        stage_5.beginPath();
        stage_5.arc(x, y, 2, 0, 2 * Math.PI);
        stage_5.fill();
        if (points.length > 1) {
        }
        if (points.length === 4) {
          nowStep = stage_5
          isDrawing = true;
          renderPath()
        }
    })


    function percentPoint(a, b, step) {
      const per = step * perStep;
      return {
        x: a.x + (b.x - a.x) * per,
        y: a.y + (b.y - a.y) * per
      }
    }
    function renderLine(step, pointsList, color) {
      let nextLevelPoints = []

      for (let i = 0; i < pointsList.length; i++) {
        if (pointsList[i + 1]) {
          const point = percentPoint(pointsList[i], pointsList[i + 1], step);
          nextLevelPoints.push(point)
        }
      }

      if (nextLevelPoints.length === 1) {
        const final = percentPoint(pointsList[0], pointsList[1], step);
        nowStep.beginPath();
        nowStep.fillStyle = 'black'
        nowStep.arc(final.x, final.y, 1, 0, 2 * Math.PI);
        nowStep.fill();
        nowStep.closePath();
      }
     
      if (nextLevelPoints.length > 1) {
        renderLine(step, nextLevelPoints, ++color)
      }
    }

    function renderPath() {
      let step = 0;
      
      pathTimer = setInterval(() => {
        renderLine(step, points, 1)
        step++;
        if (step * perStep > 1) {
          
          points = [];
          // points = [];
          clearInterval(pathTimer)
          isDrawing = false;
          if(nowheight == 0){
            nowStep = stage_1
            let arrayList = [{x:114,y:0},{x:151,y:46},{x:176,y:95},{x:211,y:125},]
            step2(arrayList)
          }
          if(nowheight==1){
            let setColor =   document.getElementsByClassName("wrapper-pic")
               setColor[0].style.backgroundImage="url('./1.png')"
               let setColor1 =   document.getElementsByClassName(" wrapper-word-1")
                setColor1[0].style.backgroundImage="url('./1-1.png')"
          let arrayList = [{x:211,y:125},{x:251,y:130},{x:256,y:91},{x:288,y:67}]
            step2(arrayList)
          }
          if(nowheight==2){
            let setColor =   document.getElementsByClassName("wrapper-pic")
            setColor[0].style.opacity = 1
            let setColor1 =   document.getElementsByClassName(" wrapper-word-1")
            
            setColor1[0].style.opacity = 1

            let arrayList = [{x:288,y:67},{x:323,y:56},{x:338,y:94},{x:303,y:150}]
            step2(arrayList)
          }
          if(nowheight==3){
            let arrayList = [{x:303,y:150},{x:283,y:191},{x:279,y:239},{x:294,y:295}]
            step2(arrayList)
          }
          if(nowheight==4){
            let arrayList = [{x:294,y:295},{x:322,y:348},{x:363,y:431},{x:396,y:531}]
            step2(arrayList)
          }
          if(nowheight==5){
             
            let arrayList = [{x:396,y:531},{x:398,y:564},{x:398,y:587},{x:384,y:606}]
            step2(arrayList)
          }
          if(nowheight==6){
            let arrayList = [{x:384,y:606},{x:354,y:607},{x:327,y:594},{x:291,y:587}]
            step2(arrayList)
          }
          if(nowheight==7){
            let arrayList = [{x:291,y:587},{x:279,y:590},{x:272,y:615},{x:272,y:683}]
            step2(arrayList)
          }
          if(nowheight==8){
            let arrayList = [{x:272,y:683},{x:263,y:697},{x:246,y:700},{x:231,y:687}]
            step2(arrayList)
          }
          if(nowheight==9){
            let arrayList = [{x:231,y:687},{x:217,y:681},{x:197,y:679},{x:183,y:690}]
            step2(arrayList)
          }
          if(nowheight==10){
           
            let arrayList = [{x:183,y:690},{x:167,y:727},{x:149,y:765},{x:125,y:797}]
            step2(arrayList)
           
          }
          if(nowheight==11){
            nowStep = stage_2
           let arrayList = [{x:118,y:0},{x:93,y:18},{x:69,y:41},{x:63,y:73}]
           step2(arrayList)
          }
          if(nowheight==12){
            let setColor =   document.getElementsByClassName("wrapper-pic2")
            setColor[0].style.backgroundImage="url('./2.png')"
            let setColor1 =   document.getElementsByClassName(" wrapper-word-2")
                setColor1[0].style.backgroundImage="url('./2-1.png')"
           let arrayList = [{x:63,y:73},{x:70,y:101},{x:79,y:151},{x:83,y:172}]
           step2(arrayList)
          }
          if(nowheight==13){
            let setColor1 =   document.getElementsByClassName(" wrapper-word-2")
            
            setColor1[0].style.opacity = 1
           
            let setColor =   document.getElementsByClassName("wrapper-pic2")
           
              setColor[0].style.opacity = 1
           let arrayList = [{x:83,y:172},{x:96,y:186},{x:110,y:188},{x:128,y:196}]
           step2(arrayList)
          }
          if(nowheight==14){
           
           let arrayList = [{x:128,y:196},{x:133,y:207},{x:139,y:216},{x:147,y:231}]
           step2(arrayList)
          }
          if(nowheight==15){
           let arrayList = [{x:147,y:231},{x:153,y:231},{x:166,y:228},{x:177,y:236}]
           step2(arrayList)
          }
          
          if(nowheight==16){
           let arrayList = [{x:177,y:236},{x:187,y:247},{x:187,y:257},{x:182,y:268}]
           step2(arrayList)
          }
          if(nowheight==17){
            let arrayList = [{x:182,y:268},{x:166,y:274},{x:158,y:280},{x:147,y:296}]
           step2(arrayList)
          }
          if(nowheight==18){
           let arrayList = [{x:147,y:296},{x:133,y:308},{x:115,y:323},{x:78,y:333}]
           step2(arrayList)
          }
          if(nowheight==19){
           let arrayList = [{x:78,y:333},{x:80,y:341},{x:85,y:349},{x:95,y:354}]
           step2(arrayList)
          }
          if(nowheight==20){
           let arrayList = [{x:95,y:354},{x:107,y:350},{x:113,y:342},{x:121,y:341}]
           step2(arrayList)
          }
          if(nowheight==21){
           let arrayList = [{x:95,y:354},{x:107,y:350},{x:113,y:342},{x:121,y:341}]
           step2(arrayList)
          }
          if(nowheight==22){
           let arrayList = [{x:121,y:341},{x:139,y:355},{x:141,y:363},{x:147,y:370}]
           step2(arrayList)
          }
          if(nowheight==23){
           let arrayList = [{x:147,y:370},{x:144,y:387},{x:136,y:392},{x:111,y:390}]
           step2(arrayList)
          }
          if(nowheight==24){
           
           let arrayList = [{x:111,y:390},{x:85,y:389},{x:75,y:404},{x:85,y:436}]
           step2(arrayList)
          }
          if(nowheight==25){
           let arrayList = [{x:85,y:436},{x:91,y:490},{x:103,y:497},{x:123,y:502}]
           step2(arrayList)
          }
          if(nowheight==26){
            
           let arrayList = [{x:123,y:502},{x:155,y:509},{x:197,y:516},{x:209,y:525}]
           step2(arrayList)
          }
          if(nowheight==27){
           
           let arrayList = [{x:209,y:525},{x:219,y:542},{x:215,y:561},{x:211,y:577}]
           step2(arrayList)
          }
          if(nowheight==28){
           let arrayList = [{x:211,y:577},{x:229,y:573},{x:259,y:572},{x:286,y:561}]
           step2(arrayList)
          }
          if(nowheight==29){
           let arrayList = [{x:286,y:561},{x:303,y:563},{x:307,y:544},{x:304,y:521}]
           step2(arrayList)
          }
          if(nowheight==30){
           let arrayList = [{x:304,y:521},{x:306,y:506},{x:310,y:499},{x:319,y:507}]
           step2(arrayList)
          }
          if(nowheight==31){
           let arrayList = [{x:319,y:507},{x:328,y:516},{x:338,y:548},{x:357,y:587}]
           step2(arrayList)
          }
          if(nowheight==32){
           let arrayList = [{x:357,y:587},{x:364,y:601},{x:396,y:682},{x:397,y:703}]
           step2(arrayList)
          }
          if(nowheight==33){
           let arrayList = [{x:397,y:703},{x:398,y:743},{x:390,y:769},{x:390,y:769}]
           step2(arrayList)
          }
          if(nowheight==34){
            let setColor =   document.getElementsByClassName("wrapper-pic3")
            setColor[0].style.backgroundImage="url('./3.png')"
            let setColor1 =   document.getElementsByClassName(" wrapper-word-3")
            setColor1[0].style.backgroundImage="url('./3-1.png')"
           let arrayList = [{x:390,y:769},{x:378,y:785},{x:364,y:793},{x:349,y:797}]
           step2(arrayList)
          }
          if(nowheight==35){
            nowStep = stage_3
            let arrayList = [{x:336,y:0},{x:327,y:2},{x:267,y:41},{x:203,y:130}]
            step2(arrayList)
          }
          if(nowheight==36){
            let setColor1 =   document.getElementsByClassName(" wrapper-word-3")
            setColor1[0].style.opacity = 1
            let arrayList = [{x:203,y:130},{x:203,y:139},{x:195,y:186},{x:209,y:204}]
            step2(arrayList)
          }
          if(nowheight==37){
            let setColor =   document.getElementsByClassName("wrapper-pic3")
           
              setColor[0].style.opacity = 1
            let arrayList = [{x:209,y:204},{x:224,y:222},{x:223,y:220},{x:254,y:365}]
            step2(arrayList)
          }
          if(nowheight==38){
            let arrayList = [{x:254,y:365},{x:279,y:479},{x:339,y:742},{x:327,y:759}]
            step2(arrayList)
          }
          if(nowheight==39){
            let setColor =   document.getElementsByClassName("wrapper-pic4")
            setColor[0].style.backgroundImage="url('./4.png')"
            let setColor1 =   document.getElementsByClassName(" wrapper-word-4")
            setColor1[0].style.backgroundImage="url('./4-1.png')"
            let arrayList = [{x:327,y:759},{x:302,y:770},{x:271,y:786},{x:259,y:800}]
            step2(arrayList)
          }
          if(nowheight==40){
            nowStep = stage_4
            let arrayList = [{x:261,y:0},{x:279,y:24},{x:291,y:56},{x:286,y:100}]
            step2(arrayList)
          }
          if(nowheight==41){
            let setColor1 =   document.getElementsByClassName(" wrapper-word-4")
            setColor1[0].style.opacity = 1
            let arrayList = [{x:286,y:100},{x:278,y:151},{x:262,y:251},{x:251,y:352}]
            step2(arrayList)
          }
          if(nowheight==42){
            let setColor =   document.getElementsByClassName("wrapper-pic4")
            
              setColor[0].style.opacity = 1
            let arrayList = [{x:251,y:352},{x:234,y:418},{x:229,y:426},{x:242,y:427}]
            step2(arrayList)
          }
          if(nowheight==43){
           
            let arrayList = [{x:242,y:427},{x:254,y:429},{x:262,y:420},{x:267,y:430}]
            step2(arrayList)
          }
          if(nowheight==44){
           
            let arrayList = [{x:267,y:430},{x:266,y:443},{x:263,y:462},{x:262,y:464}]
            step2(arrayList)
          }
          if(nowheight==45){
          
            let arrayList = [{x:262,y:464},{x:253,y:454},{x:234 ,y:456},{x:139 ,y:454}]
            step2(arrayList)
          }
          if(nowheight==46){
          
            let arrayList = [{x:139,y:454},{x:103,y:454},{x:234 ,y:456},{x:139 ,y:454}]
            step2(arrayList)
          }
          if(nowheight==47){
           
            let arrayList = [{x:139,y:454},{x:103,y:454},{x:102 ,y:461},{x:102  ,y:479}]
            step2(arrayList)
          }
          if(nowheight==48){
           
            let arrayList = [{x:102,y:479},{x:102 ,y:503},{x:115 ,y:501},{x:123   ,y:501}]
            step2(arrayList)
          }
          if(nowheight==49){
          
            let arrayList = [{x:123,y:501},{x:137  ,y:501},{x:142 ,y:487},{x:147    ,y:469}]
            step2(arrayList)
          }
          if(nowheight==50){
           
            let arrayList = [{x:147,y:469},{x:155   ,y:465},{x:176  ,y:467},{x:195     ,y:485}]
            step2(arrayList)
          }
          if(nowheight==51){
            
            let arrayList = [{x:195,y:485},{x:232    ,y:501},{x:238,y:513},{x:243      ,y:541}]
            step2(arrayList)
          }
          if(nowheight==52){
            
            let arrayList = [{x:243,y:541},{x:239,y:621},{x:238,y:734},{x:238,y:734}]
            step2(arrayList)
          }
          if(nowheight == 53){
            let arrayList = [{x:238,y:734},{x:235,y:745},{x:210,y:785},{x:190,y:800}]
            step2(arrayList)
          }
          if(nowheight == 54){
            nowStep = stage_5
            let setColor1 =   document.getElementsByClassName("wrapper-word-5")
            setColor1[0].style.opacity = 1
            
            let setColor2 =   document.getElementsByClassName("wrapper-word-6")
            setColor2[0].style.opacity = 1
            let arrayList = [{x:187,y:0},{x:104,y:59},{x:84 ,y:140},{x:126 ,y:223}]
            step2(arrayList)
          }
          if(nowheight == 55){
            let arrayList = [{x:126,y:223},{x:142  ,y:255},{x:212   ,y:348},{x:152   ,y:402}]
            step2(arrayList)
          }
          if(nowheight == 56){
            // let setColor2 =   document.getElementsByClassName("bottom-style")
            // setColor2[0].style.opacity = 1
            let arrayList = [{x:152,y:402},{x:119   ,y:432},{x:84    ,y:470},{x:63    ,y:523}]
            step2(arrayList)
          }
          if(nowheight == 57){
            let arrayList = [{x:63,y:523},{x:63      ,y:550},{x:63       ,y:586},{x:63       ,y:654}]
            step2(arrayList)
          }
          if(nowheight == 58){
            let arrayList = [{x:63 ,y:654},{x:63       ,y:705},{x:63        ,y:751},{x:63       ,y:800}]
            step2(arrayList)
          }
          
        }
      }, delay)
    }
  }

</script>
<html>